<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<style type="text/css" media="screen">
		.box{
			position: absolute;
			left: 50%;
			top: 50%;
			width: 60px;
			height: 60px;
			margin: -30px 0 0 -30px;
			background-color:red;
		}	
	</style>
</head>
<body>
	<div id="box" class="box"></div>
	<script type="text/javascript" src="../gesture/m.touch.js"></script>
	<script type="text/javascript">
		var oBox = document.getElementById('box');
		css(oBox,'translateX',0);

		function getIos(){
			var u = navigator.userAgent;
			return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
		}
		window.addEventListener('devicemotion',function(e){
			var motion = e.accelerationIncludingGravity;
			if(!getIos()){
				motion.x = -motion.x;
				motion.y = -motion.y;
				motion.z = -motion.z;
			}
			var x = Math.round(motion.x);
			var y = Math.round(motion.y);
			var z = Math.round(motion.z);

			oBox.innerHTML='x:' + x;
			oBox.innerHTML+='<br />y:' + y;
			oBox.innerHTML+='<br />z:' + z;

			var nowX = css(oBox,'translateX') + x;
			css(oBox,'translateX',nowX);
		})
	</script>
</body>
</html>
